<template>
  <div class="hero-container">
    <div class="hero-wrapper">
      <!--左侧文字布局-->
      <div class="hero-split">
        <h1 class="hero-heading">
          Everything you need to build and deploy computer vision models
        </h1>
        <p class="home-hero-subtext">
          Used by over 250,000 engineers to create datasets, train models, and
          deploy to production.
        </p>
        <div class="button-wrap">
          <a href="#" class="rf-button-white button-spacer-r w-button"
            >Get Started<span class="iconfont icon-youjiantou"></span
          ></a>
        </div>
      </div>
      <!--右侧视频-->
      <div class="hero-split-video">
        <div class="hero-widget-half">
          <!--视频播放窗口-->
          <div class="hero-widget-container-edit">
            <!--调用视频轮播组件，通过父子传值传递视频路径、高度、宽度-->
            <VideoCarousel
              :videos="videoPaths"
              :key="refreshKey"
              :parentWidth="width"
              :parentHeight="height"
            ></VideoCarousel>
          </div>
          <!--视频下方按钮及图标-->
          <div class="widget-button-container">
            <a id="image-predict" href="#" class="widget-button-home w-button"
              >Upload</a
            ><a id="webcam-predict" href="#" class="widget-button-home w-button"
              >Webcam</a
            >
            <div class="inline w-embed">
              <select id="model-select">
                <option value="microsoft-coco">Microsoft COCO</option>
                <option value="construction-site-safety">
                  Worksite Safety
                </option>
                <option value="containers-detection-db0c2">Logistics</option>
                <option value="sku-110k">Retail</option>
              </select>
            </div>
            <a href="#" target="_blank" class="w-inline-block"
              ><img
                src="../assets/images/github.svg"
                loading="lazy"
                alt="github homepage-demo"
                class="image-11"
            /></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoCarousel from "@/components/VideoCarousel.vue";
export default {
  name: "SectionOne",
  data() {
    return {
      refreshKey: 0,
      /*视频路径，视频文件储存在public文件下*/
      // http://111.229.143.189:84/#/
      videoPaths: [
        { url: "http://111.229.143.189:84/videos/video_1.mp4", id: 0 },
        { url: "http://111.229.143.189:84/videos/video_2.mp4", id: 1 },
        { url: "http://111.229.143.189:84/videos/video_3.mp4", id: 2 },
        { url: "http://111.229.143.189:84/videos/video_4.mp4", id: 3 },
      ],
      width: 640, //视频轮播组件宽度
      height: 480, //视频轮播组件高度
    };
  },
  methods: {
    /*重复循环视频播放*/
    refreshChildComponent() {
      this.refreshKey += 1; // 更新 key 属性的值，强制重新渲染子组件
      //死循环
    },
    /*每隔9秒刷新组件，实现视频重复循环播放*/
    endlessLoop() {
      setTimeout(() => {
        this.refreshChildComponent();
        this.endlessLoop();
      }, 9000);
    },
  },
  mounted() {
    this.endlessLoop();
  },
  components: {
    VideoCarousel,
  },
};
</script>

<style scoped lang="less">
.hero-container {
  .hero-wrapper {
    display: flex;
    justify-content: space-between;
  }
  width: 100%;
  max-width: 1200px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  .hero-split {
    max-width: 46%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    padding-top: 120px;
    .hero-heading {
      color: #fff;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 50px;
      line-height: 1.1;
      font-weight: 700;
    }
    .home-hero-subtext {
      color: #fff;
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 1.3;
    }
    .button-wrap {
      width: 100%;
      a {
        text-decoration: none;
        font-weight: 700;
      }
      .rf-button-white.button-spacer-r {
        margin-right: 10px;
      }
      .rf-button-white {
        color: #111827;
        text-align: center;
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 4px;
        padding: 13px 20px;
        line-height: 1;
      }
    }
  }
  .hero-split-video {
    max-width: 46%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    .hero-widget-half {
      min-width: 640px;
      flex-direction: column;
      align-items: flex-end;
      display: flex;
    }
    .hero-widget-container-edit {
      z-index: 100;
      background-color: #2c005b;
      border-radius: 32px;
      height: 480px;
      overflow: hidden;
    }
    .widget-button-container {
      position: relative;
      z-index: 2;
      width: 640px;
      align-self: auto;
      display: flex;
      padding: 10px 0;
      justify-content: center;
      .widget-button-home {
        text-decoration: none;
        font-weight: 700;
        color: #fff;
        text-align: center;
        background-color: #8315f9;
        border-radius: 4px;
        align-self: center;
        margin-left: 4px;
        margin-right: 4px;
        padding: 10px 16px;
        font-size: 14px;
        display: inline-block;
      }
      .w-button:hover {
        background-color: #5905b3;
        text-decoration: none;
      }
      #model-select {
        background-color: #4d049a;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 10px;
        margin: 4px;
        font-size: 16px;
        border-right: 10px solid transparent;
      }
      .w-inline-block {
        max-width: 100%;
        display: flex;
        align-items: center;
        .image-11 {
          width: 125px;
          margin-left: 25px;
        }
      }
    }
  }
}
</style>
